<template>
  <div class="addBreed addBreed-view">
    <el-form ref="ruleFormRef" :rules="rules" :model="formdata" label-width="80px" size="small">
      <el-form-item label="已添加品种" style="padding:10px 0">
        <el-tag
          v-for="tag in lists"
          :key="tag.cropSeriesId"
          size="large"
          style="background-color:#04AE7010"
          :closable="tag.source==2"
          @close="handleClose(tag)"
        >
          {{ tag.cropSeriesName }}
        </el-tag>
      </el-form-item>
      <el-form-item label="品种" prop="userName">
        <el-input v-model="formdata.taskName" placeholder="请输入品种名称" maxlength="20" />
        <div style="color:#FF9C00;font-size:14px;padding:10px 0">20个字内</div>
      </el-form-item>
      <el-form-item label="" style="background-color: #fff;">
        <div
          style="display: flex;
          justify-content: right; width: 100%;padding-top:15px"
        >
          <el-button size="small" @click="close"><el-icon color="#888" :size="16"><circleClose /></el-icon>取消</el-button>
          <el-button size="small" type="primary" @click="confirm">
            <el-icon color="#fff" :size="16"><circleCheck /></el-icon>
            保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { addBreed, deleteCrop, getCropSeriesList } from '@/api/plant'
import { message } from '@/utils/element'
import { ElMessageBox } from 'element-plus'
import { useUserStore } from '@/pinia/modules/user'

const props = defineProps({
  stagesItem: {
    type: Object,
    default: {}
  },
})
const emit = defineEmits(['close', 'change'])
const userStore = useUserStore()
const formdata = ref({})
const lists = ref([])
const ruleFormRef = ref(null)
const rules = reactive({
  taskName: [
    { required: true, message: '请输入品种名称', trigger: 'blur' },
  ],
})
onMounted(() => {
  getList()
})
const getList = () => {
  getCropSeriesList({
    farmId: userStore.userInfo.farmId,
    cropId: props.stagesItem.cropId,
  }).then((res) => {
    lists.value = res.data || []
  })
}

const close = () => {
  emit('close')
}

const handleClose = async(item) => {
  console.log('item', item)
  ElMessageBox.confirm('确认删除吗?', '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async() => {
    const res = await deleteCrop([item.cropSeriesId])
    if (res.code === 0 || res.success) {
      getList()
    } else {
      message(res.message, 3)
    }
  })
}
const confirm = async() => {
  if (!formdata.value.taskName) {
    return message('请输入品种名称', 3)
  }
  const res = await addBreed({
    'cropId': props.stagesItem.cropId,
    'farmId': props.stagesItem.farmId,
    'cropSeriesName': formdata.value.taskName
  })
  if (res.code === 0 || res.success) {
    formdata.value.taskName = ''
    close()
    getList()
    emit('change', props.stagesItem.cropId)
    message(res.message, 2)
  } else {
    message(res.message, 3)
  }
}

</script>

<style lang="scss">
.addBreed{
    .el-tag{
        margin-right: 10px;
        margin-bottom: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        background-color: #04AE7010;
        color: #04AE70;
        border-color: #04AE7010;
        position: relative;
        padding: 8px 15px;
    }
    .is-closable{
      background-color: #fff;
      color:#333;
      border:1px solid #ddd;
    }
    .el-tag--large .el-tag__close {
        margin-left: 8px;
        background-color: #888;
        color: #fff;
        padding: 2px;
        font-size: 12px;
        height: 10px;
        width: 10px;
        position: absolute;
        right: -5px;
        top: -5px;
    }
}
</style>
<style>
.addBreed-view .el-form-item__label,
.addBreed-view .el-form-item{
  border:none !important;
  margin-bottom: 0;
  background-color: #f7f7f7;
}
</style>
